<template>
  <div class="record">
    <header>
      <h6 class="record-title">流水号：{{ baseInfo.drawdownNo || '--' }}</h6>
      <h6 class="record-title">资方流水号：{{ baseInfo.thirdNo || '--' }}</h6>
    </header>
    <section class="record-container">
      <p>所属项目：{{ baseInfo.appName || '--' }}</p>
      <p>申请企业：{{ baseInfo.tenantName || '--' }}</p>
      <p>统一信用代码：{{ baseInfo.uscCode || '--' }}</p>
      <p>申请产品：{{ baseInfo.productName || '--' }}</p>
      <p>资金方：{{ baseInfo.fundName || '--' }}</p>
      <p>支用日期：{{ baseInfo.drawdownDate ? baseInfo.drawdownDate.replace(/T/, ' ') : '--' }}</p>
      <p v-if="baseInfo.amount">支用金额：{{ baseInfo.amount | separatorMoney }}元</p>
      <p v-else>支用金额：--元</p>
      <p>利率：{{ baseInfo.interestRate || '--' }}%</p>
      <p>到期日：{{ baseInfo.lastDueRepayDate || '--' }}</p>
      <p v-if="baseInfo.notRepayAmount">剩余未还金额：{{ baseInfo.notRepayAmount | separatorMoney }}元</p>
      <p v-else>剩余未还金额：--元</p>
      <p>状态：{{ baseInfo.status || '--' }}</p>
    </section>
  </div>
</template>

<script>
export default {
  name: 'BaseInfo',
  props: {
    baseInfo: Object,
  },
  data() {
    return {}
  },
}
</script>

<style lang="scss" scoped>
.record {
  > header {
    display: flex;
  }
  &-title {
    width: 50%;
    color: $gray;
    font-size: $f-s-16;
    margin-bottom: 18px;
  }
  &-container {
    display: flex;
    flex-wrap: wrap;
    color: $gray;
    font-size: $f-s-16;
    > p {
      width: 50%;
      margin-bottom: 10px;
    }
  }
}
</style>
